header {
  /* 开启flex布局并让里面的内容垂直居中 */
  display: flex;
  align-items: center;
  height: 52px;
  background-color: #333333;
  font-size: 14px;
}

header .w {
  /* 去掉版心的白色 */
  background-color: transparent;
}

header ul {
  /* 开启flex布局 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

header ul li:nth-child(2n) {
  border-left: 2px solid #666666;
  height: 14px;
  margin: 0 15px;
}

header ul li a:hover {
  color: #27ba8e;
}

header ul li a {
  color: #cdcdcd;
}

/* 导航栏 */
nav {
  height: 132px;
  background-color: #ffffff;
  margin-bottom: 20px;
}

nav .w {
  /* 开启flex布局 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  /* 搜索引擎SEO优化 */
  /* 搜索框 */
  /* 购物车模块 */
}

nav .w .logo a {
  display: block;
  width: 200px;
  height: 132px;
  font-size: 0;
  background: url(../images/header/logo.png) no-repeat center 18px;
  background-size: contain;
}

nav .w h1,
nav .w ul,
nav .w .search {
  display: flex;
}

/* 购物车显示 */
nav .w .shoppingCart {
  position: relative;
  width: 44px;
  height: 44px;
}

nav .w .shoppingCart .showNums {
  position: absolute;
  left: 16px;
  top: -4px;
  padding: 0 5px;
  height: 14px;
  line-height: 14px;
  background-color: #e26237;
  border-radius: 7px;
  text-align: center;
}

nav .w .shoppingCart .showNums i {
  /* position: absolute; */
  font-size: 12px;
  color: #faffff;
}

nav .w ul {
  font-size: 16px;
}

nav .w ul li {
  margin: 0 23px;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}

nav .w ul li:hover {
  border-color: #27ba8e;
}

nav .w ul li a:hover {
  color: #27ba8e;
}

nav .w .search {
  /* 开启flex布局让里面的内容垂直居中 */
  display: flex;
  align-items: center;
  width: 171px;
  height: 32px;
  border-bottom: 1px solid #e7e7e7;
}

nav .w .search i {
  font-size: 18px;
}

nav .w .search input {
  padding: 5px;
  border: none;
  font-size: 12px;
}

nav .w .search input::placeholder {
  color: #cccccc;
}

nav .w .shoppingCart {
  /* 修改鼠标默认样式 */
  cursor: pointer;
}

nav .w .shoppingCart i {
  font-size: 26px;
}

/* 尾部 */
footer {
  margin-top: 20px;
  background-color: #ffffff;
  /* 解决外边距塌陷 */
  border: 1px solid transparent;
  /*尾部 footer-bottom */
}

footer .footer_top {
  display: flex;
  justify-content: space-between;
  margin-top: 55px;
  margin-bottom: 85px;
  /* 下载app模块 */
}

footer .footer_top>div {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #9f9f9f;
  font-size: 16px;
  position: relative;
}

footer .footer_top>div::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 310px;
  width: 1px;
  height: 200px;
  border-right: 1px solid #f2f2f2;
}

footer .footer_top>div>div:nth-child(2) {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

footer .footer_top>div>div:nth-child(2) span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 91px;
  height: 91px;
  border: 1px solid #f1f1f1;
  margin: 5px;
  font-size: 14px;
}

footer .footer_top>div>div:nth-child(2) span:hover i {
  color: #27ba9b;
}

footer .footer_top>div>div:nth-child(2) span i {
  font-size: 30px;
}

footer .footer_top .rexian::before {
  content: '';
  width: 0;
  height: 0;
}

footer .footer_top .rexian div:nth-child(2) {
  flex-direction: column;
}

footer .footer_top .rexian div:nth-child(2) div:nth-child(1) {
  font-size: 24px;
}

footer .footer_top .download_app .btn_download {
  margin-top: 10px;
  width: 105px;
  height: 32px;
}

footer .footer_top .download_app .btn_download button {
  width: 105px;
  height: 32px;
  margin-top: 8px;
  background-color: #27ba9b;
  border: none;
  color: #fff;
}

footer .footer_bottom {
  height: 347px;
  background-color: #333333;
  color: #fff;
}

footer .footer_bottom .w .footerUp {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 180px;
  border-bottom: 1px solid #434343;
}

footer .footer_bottom .w .footerUp div {
  display: flex;
  align-items: center;
  width: 173px;
  height: 58px;
  font-size: 26px;
  cursor: pointer;
}

footer .footer_bottom .w .footerUp div i {
  font-size: 45px;
  margin-right: 5px;
}

footer .footer_bottom .w .footerBottom ul {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

footer .footer_bottom .w .footerBottom ul li {
  color: #999999;
}

footer .footer_bottom .w .footerBottom ul li:nth-child(2n) {
  width: 1px;
  height: 16px;
  border-left: 1px solid #999999;
  margin: 0 10px;
}

footer .footer_bottom .w .footerBottom>div {
  color: #999999;
  text-align: center;
  margin-top: 20px;
}

/*# sourceMappingURL=./header.css.map */


/* 滚动的导航栏 */
.slide_nav {
  position: fixed;
  top: -80px;
  z-index: 99;
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #e4e4e4;
  transition: all .3s;
}

body .slide_nav .logo a {
  height: 60px;
  background: url(../images/header/logo.png) no-repeat center;
  background-size: contain;
}

/* 实现购物车的下拉 */
nav .w .shoppingCart:hover .slideBar{
  visibility: visible;
  height: 400px;
}
.shoppingCart .up .item:hover .del{
  visibility: visible;
}
nav .w .shoppingCart .slideBar {
  position: absolute;
  left: -350px;
  top: 45px;
  width: 400px;
  height: 400px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  visibility: hidden;
  transition: all .3s;
}

nav .w .shoppingCart .slideBar .trangle {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 355px;
  top: -11px;
  transform: rotate(-135deg);
  z-index: 9;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

nav .w .shoppingCart .up {
  height: 330px;
  overflow: auto;
  padding: 10px;
}

nav .w .shoppingCart .down {
  width: 100%;
  height: 70px;
  padding: 10px;
  background-color: #f8f8f8;
}

.w .shoppingCart .down {
  display: flex;
  justify-content: space-between;
}

.shoppingCart .down button {
  width: 180px;
  height: 50px;
  border: 1px solid #27ba9b;
  background-color: #e6faf6;
  border-radius: 5px;
  color: #27ba9b;
  font-size: 16px;
}

.shoppingCart .text {
  color: #a7a7a7;
  padding: 5px;
}

.shoppingCart .text p:nth-of-type(2) {
  color: #d35e5e;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 600;
}
.shoppingCart .up ul{
  flex-direction: column;
}
.shoppingCart .up .item {
  display: flex;
  align-items: center;
  width: 370px;
  margin: 0;
  padding: 5px;
  border-bottom: 1px solid #f5f5f5;
}

.shoppingCart .up img {
  width: 80px;
  height: 80px;
}

.up .item .title {
  padding: 10px 5px;
}

.up .item .title p {
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up .item .price p {
  font-size: 16px;
  text-align: center;
  color: #d9675d;
}
.up .item .price p:nth-of-type(2),
.up .item .title p:nth-of-type(2) {
  font-size: 14px;
  color: #a79d9a;
  margin-top: 5px;
}
.up .item .del {
  visibility: hidden;
  padding: 8px;
  color: #6b6b6b
}